<script setup>
  import PageLayout from '@/components/PageLayout.vue'
  import DynamicTable from '@/components/DynamicTable.vue'
  import { useDynamicForm } from '@/hooks'
  import { ElMessage } from 'element-plus'
  import { addLibrary, getAdminList, getLibraryList } from '@/api'
  import { ref, onMounted, useTemplateRef } from 'vue'
  import { useRouter } from 'vue-router'

  const { openForm } = useDynamicForm()
  const formRef = useTemplateRef('form')
  const router = useRouter()

  const libraryTableData = ref([])
  const libraryAdminOptions = ref([])

  const libraryTableColumns = [
    { label: 'Id', prop: 'id' },
    { label: '图书馆名称', prop: 'name' },
    { label: '地址', prop: 'address' },
    { label: '图书馆状态', prop: 'libraryStatus', filter: val => ['闭馆', '开放', '长期闭馆'][val] },
    { label: '开馆时间', prop: 'dailyOpenTime' },
    { label: '闭馆时间', prop: 'dailyCloseTime' },
    { label: '馆长', prop: 'managerName' },
    { label: '操作', prop: 'options' },
  ]

  const handleGetLibraryList = () => {
    getLibraryList().then(res => {
      libraryTableData.value = res.data
    })
  }

  const handleGetAdminList = () => {
    const p = getAdminList().then(res => {
      libraryAdminOptions.value = res.data.admins.map(item => ({
        label: item.username,
        value: item.id,
      }))
    })

    formRef.value.load(p)
  }

  const onOpenForm = () => {
    const options = {
      title: '创建图书馆',
      fields: [
        {
          label: '图书馆名称',
          key: 'name',
          required: true,
        },
        {
          label: '图书馆地址',
          key: 'address',
          required: true,
        },
        {
          label: '日常开馆时间',
          key: 'dailyOpenTime',
          type: 'time-select',
          required: true,
        },
        {
          label: '日常闭关时间',
          key: 'dailyCloseTime',
          type: 'time-select',
          required: true,
        },
        {
          label: '馆长',
          key: 'managerId',
          type: 'select',
          options: libraryAdminOptions,
          required: true,
        },
      ],
      onConfirm: (data, { close, setLoading }) => {
        if (data.dailyOpenTime > data.dailyCloseTime) {
          ElMessage.warning('日常开馆时间不能大于日常闭馆时间')
          return
        }

        console.log(data)

        const dailyOpenTime = data.dailyOpenTime + ':00'
        const dailyCloseTime = data.dailyCloseTime + ':00'

        setLoading(true)
        addLibrary({
          ...data,
          dailyOpenTime,
          dailyCloseTime,
        })
          .then(res => {
            ElMessage.success('图书馆创建成功')
            close()
            handleGetLibraryList()
          })
          .finally(() => setLoading(false))
      },
    }

    openForm(options)
  }

  const onGoDetail = row => {
    router.push({ name: 'library-detail', params: { id: row.id } })
  }

  onMounted(() => {
    handleGetLibraryList()
    handleGetAdminList()
  })
</script>

<template>
  <page-layout>
    <template #header>
      <el-button @click="handleGetAdminList">刷新</el-button>
      <el-button type="success" @click="onOpenForm"> 创建图书馆 </el-button>
    </template>

    <dynamic-table ref="form" :data="libraryTableData" :columns="libraryTableColumns">
      <template #options="{ row }">
        <el-button type="success" @click="onGoDetail(row)">详情</el-button>
      </template>
    </dynamic-table>
  </page-layout>
</template>
